<template>
  <div class="contact-container">
    <!-- 标题区 -->
    <div class="header">
      <h1>联系我们</h1>
      <p>请填写以下表单，我们会尽快回复您</p>
    </div>

    <!-- 表单区 -->
    <el-form :model="formData" label-position="top" :rules="formRules" ref="formRef"  class="contact-form"
             style="margin-top: 30px;">
      <!-- 姓名输入 -->
      <el-form-item label="您的称呼" prop="name">
        <el-input v-model="formData.name" placeholder="请输入您的姓名"  style="height: 60px"/>
      </el-form-item>

      <!-- 电话输入 -->
      <el-form-item label="电话联系方式" prop="phone">
        <el-input v-model="formData.phone" placeholder="请输入您的手机号码" style="height: 60px"
        />
      </el-form-item>

      <!-- 邮箱输入 -->
      <el-form-item label="邮箱联系方式" prop="email">
        <el-input v-model="formData.email" placeholder="请输入您的电子邮箱" style="height: 60px"/>
      </el-form-item>

      <!-- 留言输入（带字数统计） -->
      <el-form-item label="留言内容（不超过200字）" prop="content">
        <el-input v-model="formData.content"
            type="textarea"
            :maxlength="200"
            placeholder="请详细描述您的需求..."
            show-word-limit
                  class="custom-textarea"
        />
      </el-form-item>

      <!-- 提交按钮 -->
      <el-form-item>
        <el-button type="primary" @click="handleSubmit">提交留言</el-button>
      </el-form-item>
    </el-form>

    <!-- 邮件接收地址 -->
    <div class="email-info">
      <p>邮件将发送至：<a>{{ email }} </a></p>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { addSendEmail} from "@/api/business/sendEmail";
import { ElMessage } from 'element-plus'
import axios from "axios"; // 用于提示反馈（可选）

const { proxy } = getCurrentInstance();
// 表单数据
const formData = ref({
  name: '',
  phone: '',
  email: '',
  content: ''
})

// 表单验证规则（可选，增强健壮性）
const formRules = ref({
  name: [{ required: true, message: '请输入您的姓名', trigger: 'blur' }],
  phone: [{ required: true, message: '请输入手机号码', trigger: 'blur' }],
  email: [
    { required: true, message: '请输入电子邮箱', trigger: 'blur' },
    { type: 'email', message: '邮箱格式不正确', trigger: ['blur', 'change'] }
  ],
  content: [{ required: true, message: '请填写留言内容', trigger: 'blur' }]
})

// 表单引用（用于手动触发验证）
const formRef = ref(null)

// 接收邮件的邮箱（可配置）
const email = 'qianya18948172711@163.com'

// 提交表单逻辑
function handleSubmit() {
  proxy.$refs["formRef"].validate(valid => {
    if (valid) {

      addSendEmail(formData.value).then(response => {
        proxy.$modal.msgSuccess("留言提交成功！我们会尽快回复");

      });
    }
  })
}

</script>

<style scoped>
.contact-container {
  max-width: 700px;
  margin: 40px auto;
  padding: 24px;
  background-color: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
}

/* 标题区样式 */
.header {
  background: linear-gradient(135deg, #6e8efb, #4a6cf7); /* 紫色渐变背景 */
  color: #fff; /* 文字白色 */
  text-align: center;
  padding: 20px;
  border-top-left-radius: 8px;
  border-top-right-radius: 8px;
}

.header h1 {
  margin: 0;
  font-size: 24px;
  font-weight: 600;
}

.header p {
  margin: 10px 0 0;
  font-size: 14px;
  opacity: 0.9;
}

/* 表单样式 */
.contact-form {
  margin-bottom: 24px;
}
.el-form-item__label {
  font-weight: bold;
  color: #333;
}
.el-input,
.el-textarea {
  width: 100%;
  border-radius: 4px;
}

/* 提交按钮样式（渐变效果） */
.el-button--primary {
  background: linear-gradient(45deg, #409eff, #67c23a);
  border: none;
}

/* 邮件信息样式 */
.email-info {
  text-align: center;
  font-size: 14px;
  color: #666;
}
.email-info a {
  color: #409eff;
  text-decoration: none;
}
 /*::v-deep(.el-input__wrapper) {*/
 /* height:50px!important;*/
/*}*/
::v-deep .custom-textarea .el-textarea__inner {
  height: 200px; /* 固定高度 */
  min-height: 200px; /* 防止内容过少时高度收缩 */
  max-height: 200px; /* 限制最大高度（可选） */
  resize: none; /* 禁止用户手动拖动调整大小 */
}
</style>